import React from "react";
import styles from "./Header.module.css";
import {Button, Dropdown, Input, Layout, Menu, Typography} from "antd";
import {GlobalOutlined} from "@ant-design/icons";
import logo from "../../assets/logo.svg";
import {useNavigate} from "react-router-dom";
import {useTranslation} from "react-i18next";
// 引入相关的hooks
import {useSelector, useDispatch} from 'react-redux';
// 引入对应的方法
import {defaultLanguage, setLanguage} from "../../redux/reducer/languageSlice";
import type {MenuProps} from "antd";

export const Header : React.FC = () => {
  const {t} = useTranslation();
  /*hooks*/
  // 通过useSelector直接拿到store中定义的value
  const {language} = useSelector((store:any)=>store.counter)
  // 通过useDispatch 派发事件
  const dispatch = useDispatch()
  const navigate = useNavigate()

  const onClick: MenuProps['onClick'] = ({key}) => {
    /*这里需要派发一个action来改变store中的数据*/
    /* 实现方法一
    const action = {
      type: "changeLanguage",
      payload: key
    }
    dispatch(action)
    */

    /* 方法二：复用languageSlice.ts中的setLanguage的方法 */
    dispatch(setLanguage({languageCode:key}))
  };

  const items:MenuProps['items'] = defaultLanguage.languageList.map((l)=>{
    return { label: l.name, key: l.code}
  })

  return (
      <div className={styles["app-header"]}>
        {/* top-header */}
        <div className={styles["top-header"]}>
          <div className={styles.inner}>
            <Typography.Text>{t("header.slogan")}</Typography.Text>
            <Dropdown.Button
                style={{ marginLeft: 15,display: "inline" }}
                menu={{items,onClick}}
                icon={<GlobalOutlined />}
            >
              {language === "zh"?"中文":"English"}
            </Dropdown.Button>
            <Button.Group className={styles["button-group"]}>
              <Button onClick={()=>navigate("/register")}>{t("header.register")}</Button>
              <Button onClick={()=>navigate("/sign-in")}>{t("header.signin")}</Button>
            </Button.Group>
          </div>
        </div>
        <Layout.Header className={styles["main-header"]}>
          <span onClick={()=>navigate("/")}>
            <img src={logo} alt="logo" className={styles["App-logo"]} />
          <Typography.Title level={3} className={styles.title}>
            React旅游网
          </Typography.Title>
          <Input.Search
              placeholder={"请输入旅游目的地、主题、或关键字"}
              className={styles["search-input"]}
          />
          </span>
        </Layout.Header>
        <Menu mode={"horizontal"} className={styles["main-menu"]}>
          <Menu.Item key="1"> {t("header.home_page")} </Menu.Item>
          <Menu.Item key="2"> {t("header.weekend")} </Menu.Item>
          <Menu.Item key="3"> {t("header.group")} </Menu.Item>
          <Menu.Item key="4"> {t("header.backpack")} </Menu.Item>
          <Menu.Item key="5"> {t("header.private")} </Menu.Item>
          <Menu.Item key="6"> {t("header.cruise")} </Menu.Item>
          <Menu.Item key="7"> {t("header.hotel")} </Menu.Item>
          <Menu.Item key="8"> {t("header.local")} </Menu.Item>
          <Menu.Item key="9"> {t("header.theme")} </Menu.Item>
          <Menu.Item key="10"> {t("header.custom")} </Menu.Item>
          <Menu.Item key="11"> {t("header.study")} </Menu.Item>
          <Menu.Item key="12"> {t("header.visa")} </Menu.Item>
          <Menu.Item key="13"> {t("header.enterprise")} </Menu.Item>
          <Menu.Item key="14"> {t("header.high_end")} </Menu.Item>
          <Menu.Item key="15"> {t("header.outdoor")} </Menu.Item>
          <Menu.Item key="16"> {t("header.insurance")} </Menu.Item>
        </Menu>
      </div>
  );
}